<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="./../css/reset.css">
    <link rel="stylesheet" href="./../css/public.css">
    <link rel="stylesheet" href="./../css/list.css">
    <style>
        #cont {
            width: 1200px;
            height: 2000px;
            margin: 0 auto;
        }

        .contSon {
            width: 250px;
            height: 350px;
            margin: 0 auto;
            float: left;
            margin: 25px;
        }
    </style>
</head>

<body>
    <div id="content">
        <ul class="firstName">
            <li class="secondName"><a href="../index.html">首页&nbsp;&nbsp;</a><span>></span></li>
            <li class="thirdName">冠军毛巾</li>
        </ul>
        <div class="title">
            <div class="box">
                <h2>冠军毛巾&nbsp;&nbsp;商品筛选</h2>
            </div>
            <a href="./list.html">充值筛选条件</a>
        </div>
        <div id="cont">
            <div class="contTop"></div>

            <!-- 插入数据内容 -->
            <!-- <div class="contSon">
                <div class="contBig">
                <img src="http://p1.dapuimg.com/public/images/52/7f/7d/dea0233cc52a739cca40896bb0b0e3e2.jpg?1574396353#h"
                    alt="">
                <div class="mini"><img src="https://activity.dapuimg.com/2521000.png" alt=""></div>
            </div>

            <div class="contSmall"><img
                    src="http://p1.dapuimg.com/public/images/81/39/4e/d4a7ef61e7563382fac47c61723eba64.jpg?1574396353#h"
                    alt="">
            </div>
            <div class="contText">
                <p>￥39</p>
                <p><a href="javascript:;">阿瓦提素色毛巾</a></p>
            </div>
            </div> -->


        </div>
    </div>
    <script>
        let num = 0
        getData(0, 20)
        let oCon = document.querySelector('#cont')


        function getData(start, size) {
                // 这里是回调函数
                $.get('./../php/list.php?start=' + start + '&&size=' + size , function (res) {
                console.log(res)
                // 成功拿到数据
                // 接下来对数据进行操作
                // 生成li放进ul里面
                let str = ''
                res.forEach(el => {
                    str += `
                <div class="contSon">
                <div class="contBig">
                    <a href="javascript:;">
                    <img src="${el.img}"
                        alt="">
                    </a>
                    <div class="mini"><img src="${el.logo}" alt=""></div>
                </div>

                <div class="contSmall"><img
                        src="${el.smallimg}"
                        alt="">
                </div>
                <div class="contText">
                    <p>￥${el.price}</p>
                    <p><a href="javascript:;">${el.text}</a></p>
                </div>
            </div>
                `
                })
                document.getElementById('cont').innerHTML += str;
            }, 'json')
        }






        // 滚动加载
        window.onscroll = function () {
            // 滚动距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 可视区域
            var windowHeight = document.documentElement.clientHeight

            if ((scrollTop + windowHeight) >= oCon.clientHeight+100) {
                num += 20;
                getData(num, 20);
            }

        }


        // 刷新返回顶部
        $('html ,body').animate({ scrollTop: -10 }, 300);
    </script>
</body>

</html>